import { useState } from 'react';
import { Plus, Edit2, Trash2, Upload } from 'lucide-react';
import { useTools } from '../hooks/useTools';
import ToolForm from '../components/ToolForm';

export default function ManageTools() {
  const { tools, addTool, updateTool, deleteTool } = useTools();
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [editingTool, setEditingTool] = useState<string | null>(null);

  const handleEdit = (toolId: string) => {
    setEditingTool(toolId);
    setIsFormOpen(true);
  };

  const handleDelete = (toolId: string) => {
    if (window.confirm('确定要删除这个工具吗？')) {
      deleteTool(toolId);
    }
  };

  const handleFormClose = () => {
    setIsFormOpen(false);
    setEditingTool(null);
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* 标题区域 */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-slate-800 mb-2">管理工具</h1>
          <p className="text-slate-600">添加、编辑或删除工具应用</p>
        </div>
        <button
          onClick={() => setIsFormOpen(true)}
          className="flex items-center space-x-2 px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors shadow-lg hover:shadow-xl"
        >
          <Plus className="w-5 h-5" />
          <span className="font-medium">添加工具</span>
        </button>
      </div>

      {/* 使用说明 */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
        <h3 className="text-lg font-semibold text-blue-900 mb-3 flex items-center">
          <Upload className="w-5 h-5 mr-2" />
          如何添加自定义工具
        </h3>
        <div className="text-blue-800 space-y-2 text-sm">
          <p>1. 点击"添加工具"按钮创建新工具配置</p>
          <p>2. 填写工具信息：名称、描述、URL等</p>
          <p>3. 选择工具类型：</p>
          <ul className="list-disc list-inside ml-4 space-y-1">
            <li><strong>iframe</strong>: 工具将嵌入在页面中显示（推荐）</li>
            <li><strong>external</strong>: 工具将在新窗口中打开</li>
            <li><strong>internal</strong>: 内部路由（待开发）</li>
          </ul>
          <p>4. 工具配置会自动保存到本地存储</p>
        </div>
      </div>

      {/* 工具列表 */}
      <div className="bg-white rounded-lg shadow-sm overflow-hidden">
        <table className="min-w-full divide-y divide-slate-200">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
                工具名称
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
                描述
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
                分类
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
                类型
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-slate-200">
            {tools.map((tool) => (
              <tr key={tool.id} className="hover:bg-slate-50 transition-colors">
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="text-sm font-medium text-slate-900">{tool.name}</div>
                  <div className="text-xs text-slate-500">{tool.version}</div>
                </td>
                <td className="px-6 py-4">
                  <div className="text-sm text-slate-600 max-w-md truncate">
                    {tool.description}
                  </div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium bg-slate-100 text-slate-700 rounded-full">
                    {tool.category}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="text-sm text-slate-600">{tool.type}</span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button
                    onClick={() => handleEdit(tool.id)}
                    className="text-primary-600 hover:text-primary-900 mr-4"
                  >
                    <Edit2 className="w-4 h-4 inline" />
                  </button>
                  <button
                    onClick={() => handleDelete(tool.id)}
                    className="text-red-600 hover:text-red-900"
                  >
                    <Trash2 className="w-4 h-4 inline" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {tools.length === 0 && (
          <div className="text-center py-12">
            <p className="text-slate-500">暂无工具，点击上方按钮添加</p>
          </div>
        )}
      </div>

      {/* 工具表单弹窗 */}
      {isFormOpen && (
        <ToolForm
          toolId={editingTool}
          onClose={handleFormClose}
          onSave={(tool) => {
            if (editingTool) {
              updateTool(editingTool, tool);
            } else {
              addTool(tool);
            }
            handleFormClose();
          }}
        />
      )}
    </div>
  );
}


